<template>
  <div class="quoted-message-container" :class="preview ? 'preview' : ''">
    <div class="icon flex flex-center">
      <img src="@/kang/img/icon_quote_active.png" />
    </div>

    <div class="quoted-message">
      <div
        class="media-content flex flex-cc"
        v-if="[3, 6, 7].indexOf(this.quotedMessage.messageContent.type) >= 0"
      >
        <p>{{ this.quotedMessage._from._displayName + ':' }}</p>
        <img :src="mediaSrc" alt="" @click="onMessageClick" />
      </div>
      <div
        v-else-if="
          enableMessagePreview && this.quotedMessage.messageContent.type === 1
        "
        class="other-content"
      >
        <tippy
          :to="
            '#messagePreview' +
            this.message.messageId +
            this.quotedMessage.messageId +
            enableMessagePreview
          "
          interactive
          :animate-fill="false"
          placement="top"
          distant="7"
          theme="light"
          animation="fade"
          trigger="click"
        >
          <template #content>
            <PreviewQuotedMessageView :message="quotedMessage" />
          </template>
        </tippy>
        <p
          :id="
            'messagePreview' +
            this.message.messageId +
            this.quotedMessage.messageId +
            enableMessagePreview
          "
        >
          {{ this.quotedMessageStr }}
        </p>
      </div>
      <p v-else @click="onMessageClick">
        {{ this.quotedMessageStr }}
      </p>
    </div>

    <!-- 删除按钮 -->
    <n-icon
      class="hover click"
      size="16"
      color="#C4C4C4"
      @click="cancelQuoteMessage"
      v-if="showCloseButton"
    >
      <CloseCircleSharp></CloseCircleSharp>
    </n-icon>
  </div>
</template>

<script>
import store from '../../../../store'
import MessageContentType from '../../../../wfc/messages/messageContentType'
import Message from '../../../../wfc/messages/message'
import PreviewQuotedMessageView from './PreviewQuotedMessageView.vue'
import { fs, isElectron, shell } from '../../../../platform'
import { downloadFile, previewMM } from '../../../../platformHelper'
import { CloseCircleSharp } from '@vicons/ionicons5'

export default {
  name: 'QuoteMessageView',
  props: {
    showCloseButton: {
      type: Boolean,
      required: false,
      default: false,
    },
    // 原始消息
    message: {
      type: Message,
      required: false,
    },
    // 被引用的消息
    quotedMessage: {
      type: Message,
      required: true,
    },
    quotedMessageDigest: {
      type: String,
      required: false,
      default: '',
    },
    enableMessagePreview: {
      type: Boolean,
      required: false,
      default: false,
    },
    preview: {
      type: Boolean,
      required: false,
      default: false,
    },
  },

  data() {
    return {
      shareConversation: store.state.conversation,
    }
  },
  methods: {
    cancelQuoteMessage() {
      this.$emit('cancelQuoteMessage')
    },

    onMessageClick() {
      if (!this.enableMessagePreview) {
        return
      }
      if (this.quotedMessage) {
        switch (this.quotedMessage.messageContent.type) {
          case MessageContentType.Video:
          case MessageContentType.Image:
          case MessageContentType.MESSAGE_CONTENT_TYPE_MIX_MULTI_MEDIA_TEXT:
            previewMM(this.quotedMessage)
            break
          case MessageContentType.File:
            this.downloadQuotedFile(this.quotedMessage)
            break
          case MessageContentType.Text:
            // do nothing
            break

          default:
            // TODO
            console.log('TODO: preview quotedMessage')
            break
        }
      }
    },

    downloadQuotedFile(quotedFileMessage) {
      if (isElectron()) {
        let localPath = quotedFileMessage.messageContent.localPath
        if (localPath && fs.existsSync(localPath)) {
          shell.openPath(localPath)
        } else {
          if (!store.isDownloadingMessage(quotedFileMessage.messageUid)) {
            downloadFile(quotedFileMessage)
            store.addDownloadingMessage(quotedFileMessage.messageUid)
          } else {
            // TODO toast 下载中
            console.log('file isDownloading')
          }
        }
      } else {
        downloadFile(quotedFileMessage)
      }
    },
  },
  computed: {
    quotedMessageStr() {
      let str = ''
      if (this.quotedMessage) {
        str = this.quotedMessage._from._displayName + ':'
        if (
          [
            MessageContentType.Image,
            MessageContentType.Video,
            MessageContentType.Sticker,
          ].indexOf(this.quotedMessage.messageContent.type) < 0
        ) {
          str += this.quotedMessage.messageContent.digest(this.quotedMessage)
        }
        if (
          MessageContentType.RecallMessage_Notification ===
          this.quotedMessage.messageContent.type
        ) {
          str = '引用内容已撤回'
        }
      } else {
        str = this.quotedMessageDigest
      }
      return str
    },
    mediaSrc() {
      let src
      let msgCnt = this.quotedMessage.messageContent
      src = msgCnt.thumbnail
        ? 'data:video/jpeg;base64,' + msgCnt.thumbnail
        : msgCnt.remotePath
      return src
    },
  },
  components: {
    PreviewQuotedMessageView,
    CloseCircleSharp,
  },
}
</script>

<style lang="scss" scoped>
.icon {
  position: relative;
  margin-right: 30px;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    margin: auto;
    height: 22px;
    width: 1px;
    background-color: var(--color-primary);
  }

  img {
    width: 20px;
  }
}

.quoted-message-container {
  display: flex;
  align-items: center;
  font-size: 13px;

  &.preview {
    .icon {
      display: none;
    }

    .quoted-message {
      color: var(--color-black);
      background-color: var(--color-bg);
      padding: 5px;
      border-radius: var(--border-radius);
      font-size: 12px;
    }
  }
}

.quoted-message {
  display: flex;
  max-width: 100%;
  margin-right: 10px;
  color: var(--color-primary);
  line-height: 1.5;
  max-width: 420px;
}

.quoted-message > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}

.other-content p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}

.media-content p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.quoted-message img {
  margin-left: 10px;
  border-radius: var(--border-radius);
  width: 40px;
  height: 40px;
}
</style>
